// import React from 'react';
import React from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';

console.log(<div>{123}</div>);
/*
{$$typeof: Symbol(react.element), type: "div", key: null, ref: null, props: {…}, …}

  $$typeof: Symbol(react.element)
  key: null
  props: {children: "123"}
  ref: null
  type: "div"
  _owner: null
  _store: {validated: false}
  _self: null
  _source: null
  __proto__: Object
*/
//↑ 可以看到 如果是数字、字符串 这里生成的就是它本身 而不会被包裹进一个具有type属性的对象

class Counter extends React.Component{
  static defaultProps = {
    name: '计数器'
  }

  constructor(props) {
    super(props);
    this.state = {number: 0};

    console.log('1 Counter constructor');
  }

  componentWillMount(){
    console.log('2 Counter componentWillMount state',this.state);
  }

  componentDidMount(){
    console.log('4 Counter componentDidMount');
  }

  handleClick=(event)=>{
    this.setState({number: this.state.number + 1},()=>{
      console.log('Counter setState 回调, 应该在子组件重新渲染之后执行');
    })
  }

  render(){
    console.log('3 Counter render --- 重新计算新的虚拟dom');

    return (
      <div id={`counter-${this.state.number}`}>
        <p>{this.state.number}</p>
        {this.state.number===4?null:<ChildCounter count={this.state.number}/>}
        <button onClick={this.handleClick}>+</button>
        <FunctionCounter count={this.state.number}/>
      </div>
    );
  }

  shouldComponentUpdate(nextProps,nextState){
    console.log('5 Counter shouldComponentUpdate');
    console.log('nextProps:',nextProps);
    console.log('nextState:',nextState);
    return nextState.number % 2 === 0;
  }

  componentWillUpdate(){
    console.log('6 Counter componentWillUpdate state',this.state); //此时还没有更新状态
  }

  componentDidUpdate(){
    console.log('7 Counter componentDidUpdate');
  }
}

class ChildCounter extends React.Component {
  componentWillMount(){
    console.log('1 ChildCounter componentWillMount state:',this.state);
  }

  componentDidMount(){
    console.log('3 ChildCounter componentDidMount');
  }

  componentWillReceiveProps(newProps){
    console.log('4 ChildCounter componentWillReceiveProps',newProps);
  }

  render() {
    console.log('2 ChildCounter render');
    return <div id='child-counter'>{this.props.count}</div>
  }

  shouldComponentUpdate(nextProps,nextState){
    console.log('5 ChildCounter shouldComponentUpdate');
    return nextProps.count % 3 === 0;
  }

  componentWillUpdate(){
    console.log('6 ChildCounter componentWillUpdate');
  }

  componentDidUpdate(){
    console.log('7 ChildCounter componentDidUpdate');
  }

  componentWillUnmount(){
    console.log('ChildCounter componentWillUnmount 组件将要卸载');
  }
}

const FunctionCounter = (props) => <div id='counter-function'>{props.count}</div>;

ReactDOM.render((
  <Counter name={'计数器'}/>
), document.getElementById('root'));
